import orderHeader from "./orderHeader.scss";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { useState } from "react";
import { Button, Form, Input, Select, Col, Row, DatePicker, Space } from "antd";
import moment from "moment";
import { memo } from "react";

const { RangePicker } = DatePicker;
const dateFormat = "YYYY/MM/DD";
const traverse = (arr) => {
  let selectList = [];
  arr.map((v, i) =>
    selectList.push(
      <Select.Option value={i} key={i}>
        {v}
      </Select.Option>
    )
  );
  return selectList;
};
const typeClass = ["图文课程", "视频课程", "音频课程", "实物商品"];
const statusClass = [
  "待付款",
  "待发货",
  "已发货",
  "已完成",
  "已关闭",
  "售后中",
];
const courierClass = ["快递发货", "上门自提", "无需配送"];
const paymentClass = [
  "微信支付",
  "支付宝支付",
  "储蓄卡支付",
  "银行卡支付",
];
const preciseClass = [
  "订单编号",
  "商品名称",
  "商品编号",
  "用户姓名",
  "用户手机号",
];
const btnList = [
  { status: 0, name: "今日" },
  { status: 1, name: "昨日" },
  { status: 2, name: "最近七天" },
  { status: 3, name: "最近一月" },
];

const OrderHeader = memo(function () {
  const [isTopBtn, setIsTopBtn] = useState(0);
  const clickTopBtn = (value) => {
    setIsTopBtn(value);
  };
  const btnListRender = (arr) => {
    let list = [];
    arr.map((v, i) =>
      list.push(
        <Button
          type={v.status === isTopBtn ? "link" : "text"}
          key={i}
          onClick={() => {
            clickTopBtn(v.status);
          }}
        >
          {v.name}
        </Button>
      )
    );
    return list;
  };
  //表头查询收起状态
  const [packUp, setPackUp] = useState(false);

  const [searchForm] = Form.useForm();

  const onFinish = () => {
    console.log(searchForm.getFieldsValue());
  };

  // 收起
  const clickPackUp = () => {
    let boolean = packUp;
    console.log(222, boolean);

    setPackUp(!boolean);
  };
  return (
    <div className="order" style={orderHeader.order}>
      <div className="header">
        <Form
          initialValues={{
            size: "large",
            orderType: '',
            orderState: '',
            distributionWay: '',

          }}
          colon={false}
          form={searchForm}
          name="control-hooks"
          size={"large"}
        >
          <Row className="" gutter={40}>
            <Col span={8}>
              <Form.Item labelCol={{ offset: 1 }} name="orderType" label="订单类型">

                <Select>
                  <Select.Option value=''>
                    全部
                  </Select.Option>
                  {traverse(typeClass)}
                </Select>
              </Form.Item>
            </Col>

            <Col span={8}>
              <Form.Item
                labelCol={{ offset: 1 }}
                name="orderState"
                label="订单状态"
              >
                <Select >
                  <Select.Option value=''>
                    全部
                  </Select.Option>
                  {traverse(statusClass)}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={40}>
            <Col span={8}>
              <Form.Item name="date" label="下单日期" labelCol={{ offset: 1 }}>
                <RangePicker format={dateFormat} />
              </Form.Item>
            </Col>
            <Col className="btns">
              <Space>{btnListRender(btnList)}</Space>
            </Col>
          </Row>
          <div style={{ display: packUp ? "block" : "none" }}>
            <Row className="" gutter={40}>
              <Col span={8}>
                <Form.Item
                  labelCol={{ offset: 1 }}
                  name="distributionWay"
                  label="配送方式"
                >
                  <Select>
                    <Select.Option value=''>
                      全部
                    </Select.Option>
                    {traverse(courierClass)}
                  </Select>
                </Form.Item>
              </Col>

              <Col span={8}>
                <Form.Item
                  labelCol={{ offset: 1 }}
                  name="payWay"
                  label="付款方式"
                >
                  <Select>
                    <Select.Option value=''>
                      全部
                    </Select.Option>
                    {traverse(paymentClass)}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            <Row className="" gutter={20}>
              <Col span={6}>
                <Form.Item
                  labelCol={{ offset: 1 }}
                  name="precise"
                  label="精准查询"
                >
                  <Select>{traverse(preciseClass)}</Select>
                </Form.Item>
              </Col>

              <Col span={8}>
                <Form.Item labelCol={{ offset: 1 }} name="context" label="">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </div>
        </Form>
        <div className="abs-btns">
          <Space>
            <Button type="primary" size={"large"} onClick={onFinish}>
              查询
            </Button>
            <Button size={"large"}>重置</Button>
            <Button
              type="link"
              icon={packUp ? <DownOutlined /> : <UpOutlined />}
              size={"large"}
              onClick={clickPackUp}
            >
              收起
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
});
export default OrderHeader;
